<script setup lang="ts">
import MakeItemBar from '@/pages/make/components/MakeItemBar.vue'
import UvLine from '@/uv-ui/components/nv-line/uv-line.vue'

function handleClickLeft() {
  uni.navigateBack()
}
</script>

<template>
  <view class="h-full flex flex-col overflow-hidden">
    <wd-navbar title="新建做法分组" left-text="返回" left-arrow @click-left="handleClickLeft" />
    <scroll-view
      scroll-y
      class="box-border flex-1 overflow-hidden p-[10px]"
      :show-scrollbar="false"
    >
      <custom-wd-input
        required
        custom-input-class="text-align-right"
        label="分组名称"
        placeholder="例如：糖度"
        placeholder-class="text-align-right"
      />
      <view class="my-2">
        <uv-line />
      </view>
      <view class="mx-[20px]">
        <wd-text text="做法名称" bold size="14px" color="#333" />
      </view>
      <make-item-bar custom-class="mt-3" />
      <make-item-bar custom-class="mt-3" />
      <wd-button type="text" class="ml-2 mt-4">
        <view>
          <view class="i-carbon-add-filled text-lg text-[#F59A23]" />
          <text class="text-sm text-main">新建做法</text>
        </view>
      </wd-button>
    </scroll-view>
    <view class="flex border-t-1 border-border border-t-solid bg-white p-4">
      <wd-button type="text">
        <view class="flex flex-col items-center justify-center">
          <view class="i-icon-park-outline-link-one text-main" />
          <text class="mt-1 text-[10px] text-main leading-none">关联菜品</text>
        </view>
      </wd-button>
      <wd-button type="text" class="ml-6">
        <view class="flex flex-col items-center justify-center">
          <view class="i-icon-park-outline-sort-two text-main" />
          <text class="mt-1 text-[10px] text-main leading-none">排序</text>
        </view>
      </wd-button>
      <wd-button type="primary" :round="false" class="ml-4 flex-1">确定</wd-button>
    </view>
  </view>
</template>

<style scoped lang="scss"></style>
